<template>
	<CommonCard title="今日用户数" :value="numberFormat(orderUser)">
		<div ref="barChartRef" style="width: 100%; height: 100%"></div>
		<template #footer>
			<div>
				退货率
				<span class="emphasis">{{ numberFormat(returnRate) }}%</span>
			</div>
		</template>
	</CommonCard>
</template>

<script lang="ts">
export default {
	name: 'TodayUsers',
}
</script>

<script lang="ts" setup>
import CommonCard from './CommonCard.vue'
import { computed, onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'
import type { EChartsType } from 'echarts'
import useFormat from '@/hooks/useFormat'
import { useReportDataStore } from '@/stores/reportData'

const { numberFormat } = useFormat()
const reportDataStore = useReportDataStore()

//今日用户数
const orderUser = computed(() => reportDataStore.reportData.orderUser)
//退货率
const returnRate = computed(() => reportDataStore.reportData.returnRate)
//Y轴数据
const orderUserTrend = computed(() => reportDataStore.reportData.orderUserTrend)
//X轴数据
const orderUserTrendAxis = computed(
	() => reportDataStore.reportData.orderUserTrendAxis
)
//获取标签对象
const barChartRef = ref()
let barChart: EChartsType

const getOption = () => {
	return {
		xAxis: {
			data: orderUserTrendAxis.value,
		},
		yAxis: {
			show: false,
		},
		series: {
			type: 'bar',
			data: orderUserTrend.value,
		},
		grid: {
			left: 0,
			right: 0,
		},
		tooltip: {
			trigger: 'axis',
			confine: true,
		},
	}
}

onMounted(() => {
	//初始化
	barChart = echarts.init(barChartRef.value)
	//根据参数生成图表
	barChart.setOption(getOption())
	//响应式
	window.addEventListener('resize', () => {
		barChart.resize()
	})
})

watch(orderUser, () => {
	barChart.setOption(getOption())
})
</script>

<style scoped></style>
